<template>
    <div class="app-container">
        <el-container class="recruit-card">
            <el-header>
                <span class="head-word title"><strong>招募文案编辑</strong></span
                ><span class="head-word"
                    >（右边富文本编辑框编辑内容，左边呈现内容，此页为小程序端团长申请页）</span
                >
                <el-row type="flex" justify="end">
                    <el-button type="primary" @click="saveContent">保存</el-button>
                    <el-button type="danger" @click="recoverTemplate">恢复</el-button>
                </el-row>
            </el-header>
            <el-main>
                <el-row type="flex" justify="center" :gutter="20">
                    <el-col>
                        <el-card class="card-content">
                            <div slot="header">
                                <el-row justify="center" type="flex">
                                    <span class="card-title">标题</span>
                                    <el-input v-model="params.templateTitle" disabled></el-input>
                                </el-row>
                            </div>
                            <div v-html="params.template"></div> </el-card
                    ></el-col>
                    <el-col>
                        <el-card class="card-content">
                            <div slot="header">
                                <el-row justify="center" type="flex"
                                    ><span class="card-title">标题</span
                                    ><el-input v-model="params.templateTitle"></el-input
                                ></el-row>
                            </div>
                            <tinymce
                                :key="tinymceKey"
                                :width="760"
                                :height="500"
                                v-model="params.template"
                            ></tinymce> </el-card
                    ></el-col>
                </el-row>
            </el-main>
            <!-- <el-footer>

            </el-footer> -->
        </el-container>
    </div>
</template>

<script>
import { getStrategyTemplate, updateStrategyTemplate } from '@/api/captain';
import Tinymce from '@/components/Tinymce';
export default {
    name: 'recruit',
    components: { Tinymce },
    data() {
        return {
            params: {
                template: '',
                templateTitle: '',
                tinymceKey: 1
            }
        };
    },
    created() {
        this.getTemplate();
    },
    methods: {
        getTemplate() {
            getStrategyTemplate().then(res => {
                if (res.data.success == true) {
                    this.tinymceKey = new Date().getTime();
                    this.params = res.data.data;
                    this.$nextTick();
                } else {
                    this.$message.error('获取失败');
                }
            });
        },
        updateTempalte() {
            updateStrategyTemplate(this.params).then(res => {
                if (res.data.success == true) {
                    this.$message.success('保存成功');
                }
            });
        },
        saveContent() {
            this.updateTempalte();
        },
        recoverTemplate() {
            this.params = {};
            this.getTemplate();
        }
    }
};
</script>

<style scoped lang="scss">
.head-word {
    line-height: 18px;
    vertical-align: middle;
    .title {
        font-size: 18px;
    }
}
.card-title {
    width: 40px;
    white-space: nowrap;
    line-height: 40px;
    vertical-align: center;
    margin-right: 10px;
}
.card-content {
    height: 720px;
    width: 800px;
}
</style>

<style lang="scss"></style>
